<template>
  <el-table :data="tableData" border stripe style="width: 100%">
    <el-table-column type="selection" width="55" />
    <el-table-column v-for="item in fields" :label="item.label" :width="item.width">
      <template #default="scope">
        <div v-if="item.showType==='text' || item.showType==='expression'" v-html="getCellTxt(scope,item)"></div>
        <el-switch v-if="item.showType==='bool'" v-model="scope.row[item.name]" />        
      </template>      
    </el-table-column>
    <el-table-column>
      <template #default="scope">
        <template v-for="b in config.buttons">
          <el-button v-if="condition(b,scope)" @click="handleClick(b,scope)">
            {{b.label}}
          </el-button>  
        </template>
        <!-- <el-button v-for="b in config.buttons" v-if="condition(b)" @click="handleClick(b,scope)">
          {{b.label}}
        </el-button> -->
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-if="config.haspager" background hide-on-single-page layout="prev, pager, next" :total="recordCount">
  </el-pagination>

  <el-dialog v-model="showDialog" title="弹框">    
    <router-view></router-view>
  </el-dialog>
</template>

<script>
import axios from 'axios'
import strFormate from '../utils/stringUtils'
import findByPath from '../utils/objectUtils'
export default {
  props:{
    config:Object
  },
  created(){    
    axios.get(this.config.api).then(rep=>{     
      //todo 区分分页与不分页情况      
      this.tableData=findByPath(rep.data,this.config.apiListField)      
      this.recordCount=findByPath(rep.data,this.config.apiRecordCountField)
    })
  },
  computed:{
    fields(){
      return this.config.items.sort((a,b)=>a.order-b.order)
    }
  },
  methods:{
    condition(cfg,scope){
      if (cfg.if===undefined) return true;
      var exp=strFormate(cfg.if,scope.row)
      return eval(exp)
    },
    handleClick(btn,scope){
      if(btn.action==='dialog'){
        console.log("弹窗",btn.url);
        this.$router.push(btn.url)
        this.showDialog=true
      }
      else if (btn.action==="callapi"){
        console.log("调用api",btn.url);
      }
    },
    getCellTxt(scope,item){
      if(item.showType==='text'){
        //纯字符串 带模板的字符串 带html的字符串如链接，如加颜色等
        if(item.template==undefined){
          return scope.row[item.name]
        }
        else{
          return strFormate(item.template,scope.row)
        }
      }
      else if (item.showType==='expression'){
        //带简单表达式的字符串 如 {column}?'是':'否'
        const code=strFormate(item.template,scope.row)
        return eval(code)
      }
    }
  },
  data(){
    return {
      showDialog:false,
      tableData:[],
      totalPage:1,
      recordCount:11,
      currentPage:1
    }
  }
}
</script>

<style>

</style>